<script setup>
import { reactive, ref } from 'vue'
import useFormEvent from '@/core/hooks/useFormEvent'
import positionApi from '@/api/advert/PositionApi'
const formRef = ref() // 表单ID

const state = reactive({
  visible: false,
  loading: false // 加载开关
})

// 表单结构
const original = {
  id: '',
  channelId: '',
  seat: '',
  sizeWidth: 1,
  sizeHeight: 1,
  notes: '',
}
// 表单数据
const formState = reactive({})
// 表单 处理
const {
  onCancel, InitializeData, onFinish
} = useFormEvent({ state: state, remoteApi: positionApi, formState: formState, original: original, formRef: formRef })

//向父组件暴露方法和属性
defineExpose({ InitializeData })
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`位置信息`"
    placement="right"
    :width="'50%'"
  >
    <a-card hoverable>
      <a-spin :spinning="state.loading">
        <!-- 表单内容 begin -->
        <a-form
          ref="formRef"
          :model="formState"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 10}"
          :scroll-to-first-error="true"
          :validate-on-rule-change="false"
          @finish="onFinish"
        >
          <a-row>
            <a-col :span="24">
              <a-form-item
                label="频道" name="channelId" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入频道!' }]">
                <a-input v-model:value="formState.channelId" show-count :minlength="2" :maxlength="20" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="位置" name="seat" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入位置!' }]">
                <a-input v-model:value="formState.seat" show-count :minlength="2" :maxlength="20" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="大小(宽)" name="sizeWidth" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入大小(宽)!' }]">
                <a-input v-model:value="formState.sizeWidth" show-count :minlength="2" :maxlength="20" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="大小(高)" name="sizeHeight" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入大小(高)!' }]">
                <a-input v-model:value="formState.sizeHeight" show-count :minlength="2" :maxlength="20" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="备注" name="notes" :label-col="{span:3}" :wrapper-col="{ span: 21}">
                <a-textarea v-model:value="formState.notes" show-count />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item name="id">
                <a-space wrap>
                  <a-button type="primary" html-type="submit" size="large" block :loading="state.loading">保存</a-button>
                  <a-button size="large" block @click="onCancel">取消</a-button>
                </a-space>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-card>
  </a-drawer>
</template>